<script setup lang="ts">
import {reactive, ref} from "vue";
import type {listResponse, paramsType} from "@/api";
import type {aiRoleType} from "@/api/ai_role_api";
import {aiRoleListApi, aiRoleRemoveApi, type aiRoleUpdateUserType} from "@/api/ai_role_api";
import {Message} from "@arco-design/web-vue";
import F_text from "@/components/common/f_text.vue";
import {dateTimeFormat} from "../../../utils/date";
import {IconEdit, IconDelete} from "@arco-design/web-vue/es/icon";
import F_ai_role_order_modal from "@/components/common/f_ai_role_order_modal.vue";
import F_ai_role_create from "@/components/common/f_ai_role_create.vue";
import {getSessionIDByRoleID} from "@/service/get_session_id_by_role_id";
import F_avatar from "@/components/common/f_avatar.vue";
const data = reactive<listResponse<aiRoleType>>({
  list: [],
  count: 0,
})
const params = reactive<paramsType & {type: number}>({
  limit: 3,
  type: 3,
})

async function getData() {
  data.list = []
  data.count = 0
  const res = await aiRoleListApi(params)

  if (res.code) {
    Message.error(res.msg)
    return
  }
  Object.assign(data, res.data)
}

getData()


const aiRoleOrderVisible = ref(false)
const aiOrderDetail = reactive({
  roleID: 0,
  type: 0,
  title: "",
})

function showAiRoleOrderCreate(record: aiRoleType, type: number) {
  aiRoleOrderVisible.value = true
  aiOrderDetail.roleID = record.id
  aiOrderDetail.type = type // 推荐
  aiOrderDetail.title = record.title
}


const visible = ref(false)

const detail = reactive<aiRoleUpdateUserType>({
  title: "",
  avatar: "",
  category: "",
  abstract: "",
  prompt: "",
  roleID: 0,
  isSquare: false,
})
function ok() {
  // 判断在不在角色广场
  // 不在角色广场的更新，需要刷新一下列表
  if (!detail.isSquare){
    getData()
  }

}

function edit(record: aiRoleType) {
  detail.roleID = record.id
  detail.title = record.title
  detail.avatar = record.avatar
  detail.category = record.category
  detail.abstract = record.abstract
  detail.prompt = record.prompt
  detail.isSquare = record.isSquare
  visible.value = true
}

async function remove(id: number) {
  const res = await aiRoleRemoveApi(id)
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
  getData()
}

</script>

<template>
  <div class="my_role_view">
    <f_ai_role_create :detail="detail" type="user" @ok="ok" v-model:visible="visible"></f_ai_role_create>
    <f_ai_role_order_modal v-model:visible="aiRoleOrderVisible" v-model:detail="aiOrderDetail"></f_ai_role_order_modal>
    <div class="result">
      <div class="list" v-if="data.list.length">
        <div class="item" v-for="item in data.list">
          <div class="left">
            <f_avatar :title="item.title" :image-url="item.avatar"></f_avatar>

          </div>
          <div class="right">
            <f_text class="name">{{ item.title }}</f_text>
            <f_text class="abs" :rows="3">{{ item.abstract }}</f_text>
            <div class="info">
              <span class="date">{{ dateTimeFormat(item.createdAt) }}</span>
              <span class="count">被使用 {{ item.chatCount }} 次</span>
            </div>
          </div>
          <div class="actions">
            <div class="use">
              <a-button type="primary" @click="getSessionIDByRoleID(item.id)" size="mini">使用</a-button>
            </div>
            <div class="share" title="推荐角色" v-if="!item.isSquare" @click="showAiRoleOrderCreate(item, 1)"><i class="iconfont icon-24gl-paperPlane"></i></div>
            <div class="edit" title="编辑角色" @click="edit(item)">
              <IconEdit></IconEdit>
            </div>

            <div class="delete" title="删除角色">
              <template v-if="item.isSquare">
                <IconDelete  @click="showAiRoleOrderCreate(item, 3)"></IconDelete>
              </template>
              <template v-else>
                <a-popconfirm @ok="remove(item.id)" content="确定要删除该记录吗？">
                  <IconDelete></IconDelete>
                </a-popconfirm>
              </template>
            </div>
          </div>
        </div>
      </div>
      <a-empty v-else></a-empty>
    </div>
    <div class="page" v-if="data.count">
      <a-pagination @change="getData" show-total :total="data.count" :page-size="params.limit"
                    v-model:current="params.page"></a-pagination>
      <router-link class="more" :to="{name: 'myRoleList'}">查看更多</router-link>
    </div>
  </div>
</template>

<style lang="less">
.my_role_view {
  .item {
    border-radius: 5px;
    border: @f_border;
    padding: 20px;
    display: flex;
    position: relative;
    margin-bottom: 20px;

    .left {
      width: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .right {
      width: calc(100% - 280px);

      .name {
        font-weight: 600;
        font-size: 16px;
      }

      .abs {
        height: 3rem;
        color: var(--color-text-2);
      }

      .info {
        font-size: 12px;
        color: var(--color-text-2);

        .count {
          margin-left: 10px;
          color: var(--color-text-1);
        }
      }
    }

    .actions {
      position: absolute;
      right: 20px;
      display: flex;
      align-items: center;
      top: 50%;
      transform: translateY(-50%);

      > div {
        margin-left: 20px;
        cursor: pointer;
      }

      .share {
        color: white;
        background-color: rgb(var(--primary-6));
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
      }

      .edit {
        font-size: 20px;
        color: rgb(var(--primary-6));
      }

      .delete {
        font-size: 20px;
        color: red;
      }
    }
  }

  .page {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);

    .more {
      margin-left: 10px;
    }
  }
}
</style>